<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>JQuery操作DOM</title>
		<script src="js/jquery-1.11.1.js"></script>
		<style>
			div{
				width: 100px;
				height: 100px;
				border: 1px solid red;
			}
			a{
				color: aqua;
			}
		</style>
	</head>
	<body>
		<button>按钮</button>
		<div>
		<p>你好</p>
		</div>
		<input type="button" value="按钮2" />
		<input type="text" />
		<script>
			/* javaScript：基础语法+DOM(页面)+BOM(浏览器)
			   JQuery操作DOM方式【7个方式,36个函数】--改变页面效果
			   1.元素内容操作：操作元素和元素内容的方式【3个函数】、
			   html
			   .html()
			   .val()
			   .text()
			   2.元素属性操作：操作元素的属性[固有属性、附加属性]【4个函数】
			   .attr()
			   .removeAttr()
			   .prop()
			   .removeProp()
			  // 3.元素类名操作：【4个函数】
			   addClass()
			   removeClass()
			   toggleClass()
			   hasClass()
			   4.元素样式【尺寸】操作：【5个函数】
			   css()
			   width()和height()
			   outerWidth()和outerHeight()
			  // 5.元素删除和插入操作：【7个函数】
			   append()和prepend()
			   after()和before()
			   remove()和empty()
			   replaceWith()
			  // 6.元素遍历操作：【6个函数】
			   children()和parent()
			   sibings()
			   next()和prev()
			   each()
			   7.动画操作:【7个操作】
			   show()和hid(e()
			   slideDown()和slideUp()
			   fadeIn()和fadeOut()
			 */
			/* JQuery操作DOM  通过点击一个元素绑定一个事件给另外一个元素改变效果
			.html()函数   增加一个元素，覆盖原来的html
			.val函数		  input元素使用，改变修改表单元素中文本
			
			 */
			/* $("button").click(function(){
				//DOM操作----改变页面其他元素
				//DOM操作----改变p元素改成marquee元素
				$("p").html("<marquee>跑马灯</marquee>");
				}); */
			/* 100*100 ，div  鼠标移动上去，改变下面 超文本 */
			$("div").mouseenter(function(){
				$("p").html('<a href="#">你好</a>');
			});
			$('input[type="button"]').click(function(){
				$('input[type="text"]').val("文本框输出效果");
				});
		</script>
	</body>
</html>